<template>
    <div>
        <div class="order-summary-card">
            <div class="flex">
                <div class="title">
                    员工.经营数据明细表
                    <span class="date-range">{{ formatDateRange }}</span>
                </div>
                <div class="flex">


                    <div class="segmented-control">
                        <div v-for="item in segmentList" :key="item.value"
                            :class="['segment', { active: activeSegment === item.value }]"
                            @click="selectSegment(item.value)">
                            {{ item.label }}
                        </div>
                    </div>
                    <!-- <div class="segment export">数据导出</div> -->
                </div>
            </div>
        </div>


        <div class="app-container table_box table_box_new" v-loading="loading">
            <el-table stripe align="center" border :data="records"  v-sticky-header="{ offsetTop: 0 }"
                :header-cell-class-name="headerRowStyle" :cell-class-name="cellClassName">
                <el-table-column align="center" :label="statusMap[formParams.groupKey].name" prop="gameName">
                                                 <template slot-scope="scope">
                                                    <span v-if="formParams.groupKey === 'youxi'">{{ scope.row.gameName }}</span>
                                                    <span v-if="formParams.groupKey === 'yuangong'">{{ scope.row.yuangongName }}</span>
                                                    <span v-if="formParams.groupKey === 'qudao'">{{ scope.row.groupName }}</span>
                                                </template>
                                                </el-table-column>
                <el-table-column align="center" label="回收订单数" sortable prop="backCot" />
                <el-table-column align="center" label="已转化订单数" sortable prop="toSaleCot" />
                <el-table-column align="center" label="周转率" sortable prop="beixiaozhuanhualv" />
                <el-table-column align="center" label="毛利率" sortable prop="beixiaomaolilv" />
                <el-table-column align="center" label="成功换绑数" sortable prop="backChangeCot" />
                <el-table-column align="center" label="销售订单数" sortable prop="saleCot" />
                <el-table-column align="center" label="总销售额" sortable prop="saleAmount" />
                <el-table-column align="center" label="总利润" sortable prop="saleprofits" />
                <el-table-column align="center" label="客单价" prop="num8" />
            </el-table>
        </div>
    </div>
</template>
<script>

import { mingxi } from "@/api/dmgt/index";
export default {

    name: "index",
    props: {
        queryParams: {
            type: Object,
            default: () => ({})
        },
        formatDateRange:{
       type: [Array, String],
      default: () => []
    }
    },
   
    data() {
        return {
            loading: false,
            records: [

            ],
            segmentList: [
                { label: '员工', value: 'yuangong' },
                { label: '渠道', value: 'qudao' },
                { label: '游戏', value: 'youxi' }
            ],
            // 状态映射
            statusMap: {
                'yuangong': { name: "员工" },
                'youxi': { name: "游戏" },
                'qudao': { name: "渠道" },
            },
            activeSegment: 'yuangong',
            formParams: {}
        }
    },
    methods: {
        init() {
            this.loading = true;
            mingxi(this.formParams).then((res) => {
                this.records = res.data
            }).finally(() => {
                this.loading = false;
            });
        },
        selectSegment(val) {
            this.activeSegment = val;
            this.formParams.groupKey = val;

            this.init();
        },
        cellClassName({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
                return 'custom-style'
            }
        },
        headerRowStyle(obj) {
            let columnIndex = obj.columnIndex
            if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
                return 'custom-style-row'
            }

        }
    },
    created() {
        this.formParams = this.queryParams
        this.formParams.groupKey = 'yuangong'
        this.init()
    },
};
</script>
<style scoped lang="scss">
.order-summary-card {
    margin-top: 16px;
    padding: 0 24px 12px 24px;

    .flex {
        justify-content: space-between;
        align-items: center;
    }

}

.segmented-control {
    display: flex;
    background: #f4f4f4;
    border-radius: 50px;
    padding: 4px;
    width: fit-content;
}

.segment {
    min-width: 80px;
    text-align: center;
    padding: 4px 0;
    border-radius: 50px;
    font-size: 14px;
    color: #222;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;

    &.active {
        background: #6c5dd3;
        color: #fff;
        font-weight: 500;
        box-shadow: 0 2px 8px #e6f0ff;
    }

    &:not(.active):hover {
        background: #ececec;
    }
}

.export {
    margin-left: 6px;
    padding: 8px;
    background: #f4f4f4;
}

.title {
    font-size: 16px;
    font-weight: 600;
    color: #222;

    .date-range {
        font-size: 13px;
        color: #888;
        margin-left: 8px;
    }
}

.app-container {
    overflow: visible !important;
    min-height: auto;
}
</style>
<style>
.custom-style {
    background: #fff6f0 !important;
}

.custom-style-row {
    background: #f6e0d0 !important;
    color: #333 !important;
}
</style>